//菜单栏弹出内容
import {Sprite} from "../base/Sprite.js";
import {DataStore} from "../base/DataStore.js";
const screenWidth    = window.innerWidth
const screenHeight   = window.innerHeight
const rpx=DataStore.getRpx()
export class Rule extends Sprite {
    constructor() {
        const image = Sprite.getImage('startbg');
        
        super(image,
            0, 0,
            image.width, image.height,
            0, 0,
            DataStore.getInstance().canvas.width, DataStore.getInstance().canvas.height);
            this.arrowD = Sprite.getImage('arrowD');
            
    }
    checkIsFingerOnAir(x, y,xd,yd,width,height) {//判断是否在下箭头上
        // @params x坐标，y坐标，物体所在位置，物理宽高
        const deviation = 30
    
        return !!(   x >= xd - deviation
                  && y >= yd - deviation
                  && x <= xd + width + deviation
                  && y <= yd + height + deviation  )
      }

    initArrowDEvent(){
       
        DataStore.getInstance().canvas.addEventListener('touchend', ((e) => {
        e.preventDefault()
        let x = e.changedTouches[0].clientX
        let y = e.changedTouches[0].clientY
        
       const a= this.checkIsFingerOnAir(
            x,y,
            (screenWidth-this.arrowD.width/2*rpx)/2,450*rpx,
            this.arrowDWidth,this.arrowDHeight
            )
            
        }))
    }
    drawRule(){
        const image = Sprite.getImage('rule');
        super.draw(image,
            0, 0,
            image.width, image.height,
            (screenWidth-image.width/2*rpx)/2,100*rpx,
            image.width/2*rpx, image.height/2*rpx);
        
    }

    drawMe(){
        const image = Sprite.getImage('me');
        super.draw(image,
            0, 0,
            image.width, image.height,
            (screenWidth-image.width/2*rpx)/2,80*rpx,
            image.width/2*rpx, image.height/2*rpx);
        
    }

    drawRanking(){
        const image = Sprite.getImage('ranking');
        super.draw(image,
            0, 0,
            image.width, image.height,
            (screenWidth-image.width/2*rpx)/2,80*rpx,
            image.width/2*rpx, image.height/2*rpx);

            
    }

     circleImg(ctx, img, x, y, r) {
        ctx.save();
        var d =2 * r;
        var cx = x + r;
        var cy = y + r;
        ctx.arc(cx, cy, r, 0, 2 * Math.PI);
        ctx.clip();
        ctx.drawImage(img, x, y, d, d);
        ctx.restore();
      }


    drawRankingList(){//画列表
        this.ctx.font = '25px Arial';
        this.ctx.fillStyle = '#000';
        this.ctx.lineWidth = 5
        
        //每列上下相隔70rpx
        // const arrowU = Sprite.getImage('arrowD');//画上箭头
        // super.draw(arrowU,
        //     0, 0,
        //     arrowU.width, arrowU.height,
        //     (screenWidth-arrowU.width/2*rpx)/2,85*rpx,
        //     arrowU.width/2*rpx, arrowU.height/2*rpx);

        const crown1 = Sprite.getImage('crown1');//画皇冠1
        super.draw(crown1,
            0, 0,
            crown1.width, crown1.height,
            (screenWidth-crown1.width/2*rpx)/2-120*rpx,135*rpx+10*rpx,
            crown1.width/2*rpx, crown1.height/2*rpx);
        
        const crown2 = Sprite.getImage('crown2');//画皇冠2
        super.draw(crown2,
            0, 0,
            crown2.width, crown2.height,
            (screenWidth-crown2.width/2*rpx)/2-120*rpx,135*rpx+70*rpx+10*rpx,
            crown2.width/2*rpx, crown2.height/2*rpx);
        
        //画下箭头
        super.draw(this.arrowD,
            0, 0,
            this.arrowD.width, this.arrowD.height,
            (screenWidth-this.arrowD.width/2*rpx)/2,450*rpx,
            this.arrowD.width/2*rpx, this.arrowD.height/2*rpx);
            this.arrowDWidth=this.arrowD.width/2*rpx//下箭头宽高
            this.arrowDHeight=this.arrowD.height/2*rpx

        this.ctx.fillText(
            '吴女士',
            175*rpx,135*rpx+36*rpx,
            1000
        );
        this.ctx.fillText(
            1000,
            280*rpx,135*rpx+36*rpx,
            1000
        );
        const image = Sprite.getImage('bottle');
        this.circleImg(this.ctx,image,(screenWidth-image.width/2*rpx)/2,135*rpx,28*rpx)
           
        //第二名

        this.ctx.fillText(
            '吴女士',
            175*rpx,135*rpx+36*rpx+70*rpx,
            1000
        );
        this.ctx.fillText(
            1000,
            280*rpx,135*rpx+36*rpx+70*rpx,
            1000
        );
        const image1 = Sprite.getImage('bottle');
        this.circleImg(this.ctx,image1,(screenWidth-image.width/2*rpx)/2,135*rpx+70*rpx,28*rpx)


         //第三名
         this.ctx.fillText(
            1,
            60*rpx,135*rpx+36*rpx+140*rpx,
            1000
        );
         this.ctx.fillText(
            '吴女士',
            175*rpx,135*rpx+36*rpx+140*rpx,
            1000
        );
        this.ctx.fillText(
            1000,
            280*rpx,135*rpx+36*rpx+140*rpx,
            1000
        );
        const image2 = Sprite.getImage('bottle');
        this.circleImg(this.ctx,image2,(screenWidth-image.width/2*rpx)/2,135*rpx+140*rpx,28*rpx)

         //第三名
         this.ctx.fillText(
            1,
            60*rpx,135*rpx+36*rpx+210*rpx,
            1000
        );
         this.ctx.fillText(
            '吴女士',
            175*rpx,135*rpx+36*rpx+210*rpx,
            1000
        );
        this.ctx.fillText(
            1000,
            280*rpx,135*rpx+36*rpx+210*rpx,
            1000
        );
        const image3 = Sprite.getImage('bottle');
        this.circleImg(this.ctx,image3,(screenWidth-image.width/2*rpx)/2,135*rpx+210*rpx,28*rpx)

    }
}